<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 2. 准备容器 -->
    <div id="app">
      <h1>{{ title }}</h1>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>

    <!-- 1. 导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      // 3. 创建 Vue 实例对象
      const app = new Vue({
        // 容器
        el: "#app",
        // 数据
        data: {
          title: "计数器标题",
          count: 100,
        },
        // 生命周期函数（钩子函数） // 1.创建  2.挂载  3.更新  4.销毁

        // 1.创建（出生）
        beforeCreate() {
          // 此时数据还没初始化
          console.log("👶beforeCreate 创建Vue实例之前", this.count); // undefined
        },
        created() {
          // 数据初始化完成了
          console.log("👶created 创建Vue实例完成", this.count); // 100
        },

        // 2.挂载（步入社会）
        beforeMount() {
          console.log(
            "🌍beforeMount 挂载DOM之前",
            document.querySelector("h1") // <h1>{{ title }}</h1>
          );
        },
        mounted() {
          console.log(
            "🌍mounted 挂载DOM完成",
            document.querySelector("h1") // <h1>计数器标题</h1>
          );
        },

        // 3.更新（被监视）
        beforeUpdate() {
          console.log(
            "👀beforeUpdate 更新DOM之前",
            document.querySelector("span").innerText
          );
        },
        updated() {
          console.log(
            "👀updated 更新DOM完成",
            document.querySelector("span").innerText
          );
        },

        // 4.销毁（遗言）
        // 在控制台调试  app.$destroy()
        beforeDestroy() {
          console.log("🪦beforeDestroy 销毁Vue实例之前，实例还在，做清理动作");
        },
        destroyed() {
          console.log("🪦destroyed 销毁Vue实例完成");
        },
      });
    </script>
  </body>
</html>
